<template>
	<view class=" big-box">
		<top-navigation :isBack="true" bgColor="rgb(22, 22, 30)" isFix isShow>
			<view slot='center-slot' class="left-slot">
				钻石排行榜
			</view>
		</top-navigation>
		<u-toast ref="uToast"></u-toast>
		<view class="content">
			<view @tap="getCall(v)" class="content-box justify-start align-center" v-for="v,k in crystalList">
				<view class="top-icon-box justify-center align-center">
					<image class="top-icon" v-if="k==0" src="/static/images/starmap/one.svg" mode=""></image>
					<image class="top-icon" v-if="k==1" src="/static/images/starmap/two.svg" mode=""></image>
					<image class="top-icon" v-if="k==2" src="/static/images/starmap/three.svg" mode=""></image>
					{{k>2&&k+1 || ''}}
				</view>

				<image class="avatar" :src="imgHost+v.avatar" mode=""></image>
				<view class="r-call-info">
					<view class="acea-row justify-start align-center">
						<view class="call-name">
							{{v.nickname}}
						</view>
						<!-- <image class="level" src="/static/images/yishou/1level.png" mode="widthFix"></image>
						<view class="call-id">
							(ID:{{'1234567'}})
						</view> -->
					</view>
					<view class="contact-infos justify-start">
						<view class=" justify-start align-center">
							<!-- <image class="wx-qq-icon" src="/static/images/yishou/wx.png" mode="widthFix"></image> -->
							<view class="line1">
								ID:{{v.code}}
							</view>

						</view>
						<view class="infobox qqinfo justify-start align-center">
							<!-- <image class="wx-qq-icon" src="/static/images/yishou/qq.png" mode="widthFix"></image> -->
							<view class="line2 align-center">
								联系TA
								<!-- <image class="jiantou" src="/static/images/mine/jiantou.svg" mode=""></image> -->
								<u-icon name="arrow-right" size="12"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="shuijing-num justify-start align-center">
					<image class="kuangshi" src="/static/images/starmap/shuijingb.png" mode=""></image>
					{{v.crystal>10000?'10000+':v.crystal}}
				</view>
			</view>
		</view>
		<view class="my-rank">
			<view class="my-info justify-between align-center">
				<view class="justify-start align-center">
					<image class="user-ava" :src="user.avatar" mode=""></image>
					{{user.nickname}}
				</view>
				<text class="rank">{{user.ranking}}</text>
			</view>
		</view>
		<!-- 联系客服弹出层-->
		<u-popup :show="moneyShow" mode="center" @close="moneyShow=false" round="16rpx" bgColor='transparent'
			overlayOpacity='0.85'>
			<view class="popup-one-box flex-col">
				<u-toast ref="uToast"></u-toast>
				<view class="justify-start">
					<image class="avatar"  :src="imgHost+info.avatar" mode=""></image>
					<view class="acea-row">
						<view class="call-name">
							{{info.nickname}}
						</view>
						<view class="call-id">
							{{info.auth==1?'已':'未'}}实名认证
						</view>
					</view>
				</view>

				<view class="need-kuang justify-between align-center" @tap="myCopy(info.wx,'q')">
					<view class="need-shuijing-num justify-start align-center">
						<image class="popup-kuangshi" src="/static/images/starmap/wx-pop.png" mode=""></image>
					</view>
					<view class="need-shuijing">
						{{info.wx}}
					</view>

				</view>
				<view class="need-kuang justify-between align-center" @tap="myCopy(info.qq,'q')">
					<view class="need-shuijing-num justify-start align-center">
						<image class="popup-kuangshi" src="/static/images/starmap/qq-pop.png" mode=""></image>
					</view>
					<view class="need-shuijing">
						{{info.qq}}
					</view>

				</view>
				<view class="popup-box-btn align-center justify-center" @click="openMap">
					我也要设置我的社交信息
					<image class="right" src="/static/images/mine/jiantou.svg" mode=""></image>
				</view>
				<!-- <view class="popup-box-cancel align-center justify-center" @click="moneyShow=false">
					<image class="close-popup" src="/static/images/starmap/close.svg" mode=""></image>
				</view> -->
			</view>
		</u-popup>
	</view>
</template>

<script>
	//在需要加、解码的的文件里引入【注意替换成自己的路径】
	import {
		Base64
	} from '@/utils/plugs/imgOrBase64.js';
	import {
		imgHost
	} from '@/config/config.js'
	// let msg = 'Hello, base64！我是威叔~~_~!';

	// let encodeStr = Base64.encode(msg); //加密
	// console.log(encodeStr);

	// let decodeStr = Base64.decode(encodeStr);//解码
	// console.log(decodeStr);
	import validate from 'common/js/validate.js';
	import auth from 'common/js/auth.js';
	import globalConfig from '@/common/js/golbalConfig.js';
	import {
		randomString
	} from '../../utils/libs.js'
	import base64Arraybuffer from 'base64-arraybuffer'
	export default {
		data() {
			return {
				info:{},
				imgHost,
				user: {},
				crystalList: [],
				moneyShow: false,
			};
		},
		mixins: [auth, globalConfig],

		onLoad(option) {
			let that = this
			this.getStatic()


		},
		onShow() {

		},
		onReady() {
			// this.getStatic()
		},
		methods: {
			// getCall联系方式弹唱
			getCall(item) {
				this.info = item
				this.moneyShow = true
			},
			myCopy(value, wxorqq) {
				let _this = this
				//提示模板
				uni.setClipboardData({
					data: value, //要被复制的内容
					showToast: false,
					success: () => { //复制成功的回调函数
						_this.$refs.uToast.show({
							message: '已复制',
							type: 'default',
							duration: '500'

						})
						// uni.showToast({ //提示
						// 	title: wxorqq == 'w' ? "微信号已复制" : 'QQ号已复制'
						// })
					}
				});
			},
			async getStatic() {
				let {
					code,
					msg,
					data
				} = await this.$getRequest('/api/v1/crystal_top')
				if (code == 200) {
					console.log(data, '静态资源');
					this.crystalList = data.list || []
					this.user = data.user || {}
				} else {
					this.$refs.uToast.show({
						message: msg
					})
				}

			},

		}
	};
</script>

<style>
	@import '/common/css/common.css';
</style>

<style lang="scss" scoped>
	.big-box {
		width: 100vw;
		background: #16161e;
		min-height: 100vh;

		.my-rank {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			max-width: 23.4375rem;
			height: 4.75rem;
			background-color: #20202c;
			padding: .9375rem 2rem 0 1.4375rem;
			z-index: 10;

			.my-info {
				color: rgba(255, 255, 255, .8);
				font-size: .875rem;
				line-height: 1.25rem;
			}

			.rank {
				text-align: right;
				flex: 1;
				color: rgba(255, 255, 255, .4);
				font-size: .75rem;
			}

			.user-ava {
				width: 80rpx;
				height: 80rpx;
				border-radius: 8rpx;
				margin-right: 24rpx;
			}
		}

		.left-slot {
			color: #FFF;
			font-size: 16px;
			font-weight: 500;
		}

		.content {
			color: #D0D1D3;
			padding: 26rpx 50rpx 150rpx 32rpx;

			.content-box {
				margin-bottom: 40rpx;

				.shuijing-num {
					font-size: .875rem;
					height: 1.375rem;
					text-align: left;
					font-weight: 700;
					color: #FFF;
				}

				.kuangshi {
					width: 64rpx;
					height: 41rpx;
					margin-right: 8rpx;
				}

				.top-icon-box {
					margin-right: 32rpx;
					width: 36rpx;
					height: 36rpx;
				}

				.top-icon {
					width: 36rpx;
					height: 36rpx;
				}

				.r-call-info {
					flex: 1;
				}

				.contact-infos {
					color: rgba(255, 255, 255, .4);

					.wx-qq-icon {
						width: 30rpx;
						margin-right: 8rpx;
					}

					.qqinfo {
						margin-left: 32rpx;
					}

					.line1 {
						font-size: 24rpx;
						color: rgba(255, 255, 255, .4);
						line-height: 1.125rem;


					}

					.infobox {
						border-radius: 8rpx;
						background-color: #20202c;
						padding: 0rpx 8rpx;
						font-size: 24rpx;
						flex-wrap: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;

						.line2 {
							font-size: 20rpx;
							color: rgba(255, 255, 255, .4);
							line-height: 1.125rem;

							.jiantou {
								width: 24rpx;
								height: 24rpx;
							}
						}
					}
				}
			}

			.avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 4rpx;
				margin-right: 24rpx;
			}

			.acea-row {
				.call-name {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-bottom: 8rpx;

					font-weight: 700;
					font-size: .875rem;
					line-height: 1.1875rem;
					width: 7.5rem;
					color: rgba(255, 255, 255, .8);
				}

				.call-id {
					flex: 1;
					text-align: right;
					color: rgba(255, 255, 255, .4);
					font-size: .75rem;
					line-height: 1.125rem;
				}

				.level {
					width: 114rpx;
					margin: 0 10rpx;
				}
			}
		}
	}

	.popup-one-box {
		position: relative;
		z-index: 7;
		width: 560rpx;
		border-radius: 16rpx;
		background: #1D1D1D;
		padding: 90rpx 40rpx 48rpx;



		.shui-ji-num {
			font-size: 28rpx;
			color: #FFF;
			font-weight: 700;
		}

		.popup-box-btn {
			margin-top: 8rpx;
			width: 480rpx;
			font-size: 24rpx;
			border-radius: 8rpx;
			color: rgba(255, 255, 255, .4);

			.right {
				width: 24rpx;
				height: 24rpx;
			}
		}

		.popup-box-cancel {
			position: absolute;
			left: 50%;
			transform: translate(-50%, 0);
			bottom: -120rpx;
		}

		.close-popup {
			width: 48rpx;
			height: 48rpx;
		}

		.popup-kuangshi {
			width: 48rpx;
			height: 48rpx;
		}

		.need-kuang {
			width: 480rpx;
			height: 84rpx;
			background: #292838;
			border-radius: 8rpx;
			padding: 0 28rpx;
			margin-bottom: 24rpx;

			.need-shuijing {
				flex: 1;
				font-size: 22rpx;
				text-align: center;
				color: rgba(255, 255, 255, .8);
			}

			.need-shuijing-num {
				font-size: 28rpx;
				font-weight: 700;
				color: #FFF;
			}
		}

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 4rpx;
			margin-right: 24rpx;
		}

		.acea-row {
			margin-bottom: 42rpx;

			.call-name {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-top: 14rpx;

				font-weight: 700;
				font-size: .875rem;
				line-height: 1.1875rem;
				width: 7.5rem;
				color: rgba(255, 255, 255, .8);
			}

			.call-id {
				margin-top: 24rpx;
				flex: 1;
				text-align: left;
				color: rgba(255, 255, 255, .4);
				font-size: .75rem;
				line-height: 1.125rem;
			}

			.level {
				width: 114rpx;
				margin: 0 10rpx;
			}
		}


	}
</style>